@import url("https://fonts.googleapis.com/css2?family=Anta&display=swap");

body {
  background-color: #36454f;
  color: white;
  font-family: 'Anta', sans-serif;
  padding: 20px;
  border: 5px solid gray;
  font-size: 17px;
}

h1 {
  font-size: 55px;
  text-align: center;
  font-weight: bold;
  text-shadow: 3px 3px 1px gray;
}

h2 {
  font-size: 30px;
}

h3{
  font-size: 27px;
  text-align: center;
}
h4 {
  font-size: 22px;
  text-align: center;
}

p {
  padding: 10px 10px 10px 10px;
  border: 3px solid gray;
}

pre {
  background-color: lightgray;
  border: 5px solid gray;
  max-height: 250px;
  overflow-y: auto;
}

.scroll-500 {
  max-height: 500px;
  overflow-y: auto;
}

Project requirements

I created my GitHub account, from there I created a repository and named it “stats220”. I created a README.md file when creating my repository, in my Readme file I used three different types of headers, two types of bullet points and links to other websites. Within the Readme file I also used Bold and Italics.

The link to my repo is:
My Repo

I also created a GitHub website. I did this by creating a RMD file that I named “index.Rmd”, I decided to use the same content that is in this RMD file for my website. I then knit the file into a HTML and uploaded it to my repo. From there I set-up GitHub pages and made my website live.

The link to my stats220 website is:
My Website

This is a screenshot of my project folder I created on my computer:

My meme

The inspiration for my meme:

I decided to use this style of meme.

The key features of the meme that I re-created were the images on the right which I managed to do with images I found online. I also added text next to the images like in the inspiration picture.

The key features that I changed when making my own meme was using different pictures than the ones in the inspiration picture. I also changed the images from the right side to the left. I only used three images in my meme instead of four. I decided to change the white background to black and I used white text.

library(magick)

inspo_meme.url = "https://pbs.twimg.com/media/DP9beedX4AAvrwo.jpg"
inspo_meme = image_read(inspo_meme.url)
#image_write(inspo_meme, "inspo_meme.png")

#Links to all images used in my meme

im1.url = "https://i.imgflip.com/1lgr72.jpg?a463272"
im2.url = "https://pyxis.nymag.com/v1/imgs/42d/c5a/53aaae864601cd024b2dd1fddaa6a0839a-15-exploding-brain-meme.rsquare.w400.jpg"
im3.url = "https://i1.sndcdn.com/artworks-lyidNFrSCzymr7fo-mmlyoQ-t500x500.jpg"

#Creating a blank square for the right side of the meme
blank_square = image_blank(380, 306, color = "black") %>%
  image_border(color = "white", geometry = "2.5x2.5")

#Creating square 1,2 and 3 with the imported images for the left side of the meme
sq1 = image_read(im1.url) %>%
  image_scale("x300") %>%
  image_border(color = "black",
               geometry = "28x2.5") %>%
  image_border(color = "white",
               geometry = "2.5x2.5")

sq2 = image_read(im2.url) %>%
  image_scale("x300") %>%
  image_border(color = "black",
               geometry = "2.5x2.5") %>%
  image_border(color = "white",
               geometry = "2.5x2.5")

sq3 = image_read(im3.url) %>%
  image_scale("x300") %>%
  image_border(color = "black",
               geometry = "2.5x2.5") %>%
  image_border(color = "white",
               geometry = "2.5x2.5")

#Creating square 4,5 and 6 with text for the right side of the meme
sq4 = blank_square %>% 
  image_annotate(text = "Using R to\n analyse data",
                 color = "white",
                 font = "Impact",
                 size = 55,
                 gravity = "center")

sq5 = blank_square %>%
  image_annotate(text = "Using R to\n make statistical\n graphs",
                 color = "white",
                 font = "Impact",
                 size = 55,
                 gravity = "center")

sq6 = blank_square %>%
  image_annotate(text = "Using R to\n make memes",
                 color = "white",
                 font = "Impact",
                 size = 55,
                 gravity = "center")

#Creating two vectors for the left and right sides of the meme
left_side = image_append(c(sq1,sq2,sq3),
                         stack = TRUE)

right_side = image_append(c(sq4,sq5,sq6),
                          stack = TRUE)

#Putting the two sides of the meme together
meme = image_append(c(left_side, right_side)) %>%
  image_scale("500x")

image_write(meme, "my_meme.png") #Writing the meme to a png file
meme #Running the meme

#Animation Code

frame1 = image_append(c(sq1,blank_square))
frame2 = image_append(c(sq1,sq4))
frame3 = image_append(c(sq2,blank_square))
frame4 = image_append(c(sq2,sq5))
frame5 = image_append(c(sq3,blank_square))
frame6 = image_append(c(sq3,sq6))

frames = c(frame1, frame2, frame2, frame3, frame4,
           frame4, frame5, frame6, frame6)

gif = image_morph(frames) %>%
  image_animate(fps = 10)

image_write(gif, "my_animation.gif")

My Animation:

Creativity

I believe that my project demonstrates creativity, when changing the CSS for my HTML I managed to make the page look unique with different fonts, colors and by changing the layout of different sections of the page. I also changed the maximum height of the code chunks which allows them to be scrolled through in the html.
I also created a GitHub website. I uploaded my project to my GItHub repo, from there I configured my pages on GitHub and turned my page into a website.

Learning reflection

The one important idea that I have learnt from Module 1, is how complicated it is creating an HTML. When I was working through this project I began to understand how many different steps and processes there are when developing HTML for a web page. There is so many things that you can change, and through this project I realised that I have barely scratched the surface.

I am interested in using R, or a similar program, to analyse and report on pieces of data. I am excited to use R and RMD to visualise data and then convert that data into HTML so that it can be displayed on a web page.